1 布局方式

1.1 静态/固定布局

站点使用固定的宽度（通常是像素宽度），改变浏览器的宽度或者用不同的设备上查看站点的展示效果一样，这会在小屏设备上引入横向滚动条，对移动设备体验不友好。

1.1.1 优势

  • 设计简单，维护方便
  • 不用考虑图片的尺寸问题

1.1.2 劣势

  • 在大屏设备上会有大量白边
  • 不适应不同的设备，对用户不友好，不利于搜索引擎优化

1.2 流式布局

站点使用百分比宽度（或者其他相对宽度，某些内容也可以固定宽度），页面相对于不同的浏览器或者不同设备的宽度，流式适应。

1.2.1 优势

  • 比固定宽度更友好
  • 不同设备上展现白边较少

1.2.2 劣势

  • 需要保证设计在不同的设备上没有问题，有时候具有挑战性
  • 固定宽度的内容（比如图片和视频），不能根据不同对的屏幕进行适配
  • 大屏设备上需要确保内容足够，以减少过度的白边

1.3 自适应布局

针对特定的设备尺寸进行断点划分，或者针对特定的设备有不同的设计，需要针对新设备进行设计。

1.3.1 优势

  • 根据不同的设备类型进行专门设计适配，对用户友好
  • 移动设备可以感知用户环境
  • 设计者可以基于智能设备的用户数据优化广告投放

1.3.2 劣势

  • 不便于对不同的屏幕尺寸使用不同的布局，成本相对较高，每一种尺寸都是新的一套
  • 在创建不同屏幕尺寸不同布局的时候不能覆盖所有的设备，尤其是新出来的设备

1.4 响应式布局

在流式布局的基础上，针对不同宽度的设备进行不同的设计，不需要针对新设备进行设计。

1.4.1 优势

  • 比自适应加载更快，所有设备只有一个主布局
  • 对搜索引擎友好，容易实现

1.4.2 劣势

  • 实现难度较高，需要一个完整的开发测试流程来保证在所有设备上好使
  • 元素位置会移动，广告可能会丢失
  • 下载时间较长

2 自适应布局和响应式布局区别

自适应 响应式
设备识别 使用服务端或者客户端代码来检测设备 使用媒体查询来检测设备
实现方式 提供单独的HTML或页面，使用CSS根据屏幕大小来改变内容展现 使用弹性图片和流式网格来适配图片
内容优化 内容预先选择，只有针对设备的需要的内容才会被下载 不管什么设备都会下载所有内容，不管是否需要
设备优化 使用不同的模板，针对不同的设备进行优化 对所有设备使用同一个模板
特性 使用脚本来支撑不同的设备和屏幕尺寸，检测不同的设备类型来改变站点的展现行为 包含所有的移动端和桌面浏览器支持的特性
性能 只加载用户设备需要的资源，加载较快；图片针对特定的设备分辨率优化，减少文件尺寸和加载时间 加载针对所有设备的资源，加载较慢；加载全尺寸的图片通过压缩来适配用户设备
开发 对已经存在的站点来使用可适应的模板 整个站点重建
部署 门槛较高，开发者需要扎实的JavaScript 设计和实现曲线陡峭，用户体验需要根据不同的设备定制
不需要站点重建；需要扎实的JavaScript和CSS知识；不同的设备性能表现良好 对新站点更容易实现；需要站点重建；不同设备上性能表现较差

2.1 参考资料

  1. 关于移动端适配，你必须要知道的
  2. [【原创】移动端高清、多屏适配方案]([http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041](http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme 3041))
  3. 前端响应式布局原理与方案（详细版）
  4. CSS布局方案
  5. 前端布局基础概述
  6. Static Fixed Adaptive Responsive区别样例
  7. UXPin responsive vs adaptive
  8. Adaptive Web Design vs. Responsive Web Design
  9. Adaptive vs Responsive Design
  10. Web Design 101: Adaptive Vs. Responsive Design
  11. Fixed vs Fluid vs Adaptive vs Responsive Layout
  12. What’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design?
  13. Responsive vs. Adaptive vs. Fluid Design
  14. Adaptive vs. Responsive Web Design: Quantifying the Difference on Mobile
  15. Difference between responsive and adaptive
  16. What’s the difference between adaptive and responsive web design?
  17. Responsive Web Design
  18. Responsive design 和 Adaptive design 的区别？
  19. 布局类型及其应用场景区别
  20. 布局类型区别
  21. 布局样例参考
  22. 布局样例参考站点
  23. 响应式和自适应区别
  24. 响应式与自适应设计:设计师的最佳选择是什么?
  25. Is adaptive better than responsive design?
  26. Responsive vs. Adaptive Design: What’s the Best Choice for Designers?
  27. Adaptive Web Design
  28. Responsive Web Design
  29. adaptive vs responsive
  30. 详解响应式布局设计
  31. Responsive vs Adaptive Design
  32. The Pros and Cons of Adaptive Web Design
  33. difference between responsive and adaptive
  34. Responsive Web Design – What It Is And How To Use It
  35. adaptive vs responsive design
  36. What is Adaptive Design and is It Different from Responsive Design
  37. CSS布局解决方案（终结版）

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/dev-app/2017-08-08-css-layout/

赏
× 赞赏这个人~
打赏二维码